<template>
	<view>
		<view class="main-body">
			<view class="nav-box bgi">
				<u-gap height="118rpx"></u-gap>
				<view class="flex-row-el userinfo-box flex-align-center">
					<view class="user-photo">
						<image src="../../static/index/photo.png" style="width: 100%;height: 100%;border-radius: 50%;"></image>
					</view>
					<view class="name-level-box flex-c-el " style="justify-content: center;">
						<view class="name" >rose</view>
						<view class="level-box flex-row-el flex-align-center" >
							<view class="level-jindutiao">
								<view class="level-jindutiao-value"></view>
								<view class="level-jindutiao-value-text">100%</view>
							</view>
							<view class="level-value">LV.5</view>
						</view>
					</view>
					<view class="  flex-rrow-el flex-auto flex-align-center">
						<view class="huachi-box">
							455111
						</view>
						<image src="../../static/index/huachi.png" class="huchi-icon"></image>
					</view>
				</view>
				<u-gap height="6rpx"></u-gap>
				<view class="nav-actions flex-row-el flex-align-center">
					<view class="nav-action">
						<image src="../../static/index/jinniu.png"  style="width: 78rpx;height: 65rpx;" ></image>
					</view>
					<view class="nav-action">
						<image src="../../static/index/xiaoluguanhuan.png" style="width: 80rpx;height: 68rpx;" ></image>
					</view>
					<view class="nav-action">
						<image src="../../static/index/jiaoshui.png" style="width: 40rpx;height: 65rpx;" ></image>
					</view>
					<view class="nav-action">
						<image src="../../static/index/shifei.png" style="width: 42rpx;height: 66rpx;" ></image>
					</view>
					<view class="nav-action">
						<image src="../../static/index/kezhaiqu.png" style="width: 59rpx;height: 65rpx;" ></image>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="hudie-list">
			<view class="blue-hudie bgi hudie-item">
				<image src="../../static/index/lanhudie.png" style="width: 49rpx;height: 46rpx;margin-top: 14rpx;margin-bottom: 1rpx;"></image>
				<view class="hudie-text flex-row-el flex-align-center" style="justify-content: center;">
					<text>10</text>/20
				</view>
			</view>
		</view>
		
		<!-- 农田 -->
		<view class="farmland-box bgi">
			
		</view>
		<Store   v-model="storeShow"></Store>
		<!-- 左右两边的功能按钮 -->
		<view class="left-actions flex-c-el">
			<view class="window-action">
				<image src="../../static/index/qiequ.png"></image>
			</view>
			<view class="window-action">
				<image src="../../static/index/beibao.png"></image>
			</view>
			<view class="window-action">
				<image src="../../static/index/zhuangyuan.png"></image>
			</view>
			<view class="window-action">
				<image src="../../static/index/shouyi.png"></image>
			</view>
		</view>
		<view class="right-actions flex-c-el">
			<view class="window-action">
				<image src="../../static/index/yaoqing.png"></image>
			</view>
			<view class="window-action" @click="openStore">
				<image src="../../static/index/shangdian.png"></image>
			</view>
			<view class="window-action">
				<image src="../../static/index/gongju.png"></image>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	
	.hudie-item{
		background-image: url(../../static/index/qipao.png);
		width: 108rpx;
		height: 108rpx;
		position: absolute;
		bottom: 397rpx;
		left:150rpx;
		z-index: 5;
		text-align: center;
		.hudie-text{
			font-size: 20rpx;
			line-height: 20rpx;
			height: 20rpx;
			font-family: Yuanti SC;
			font-weight: bold;
			color:white;
			// -webkit-text-stroke: 4px #432B19;
			// text-stroke: 4px #432B19;
			
			 text-shadow: 0 0 3px #432B19, 0 0 5px #432B19;
		}
		text{
			color: #4EFC02;
		}
	}
	
	
	.farmland-box{
		background-image: url(../../static/index/tudi.png);
		width: 734rpx;
		height: 354rpx;
		position: absolute;
		bottom: 62rpx;
		left:8rpx
	}
	.left-actions,.right-actions{
		position: fixed;
		top:calc(100vh * 0.24)
	}
	.left-actions{
		left:30rpx;
	}
	.right-actions{
		right:30rpx;
	}
	.window-action{
		width: 120rpx;
		height: 132rpx;
		margin-bottom: 46rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	view{
		font-family: mcttf;
	}
	.nav-actions{
		.nav-action{
		text-align: center;
			width: 80rpx;
			flex-grow: 1;
		}
	}
	.userinfo-box{
		.huchi-icon{
			width: 54rpx;
			height: 50rpx;
			position: relative;
			margin-right:-27rpx;
		}
		.huachi-box{
			width: 160rpx;
			height: 40rpx;
			background: #442B1A;
			border-radius: 20rpx;
			margin-right: 42rpx;
			text-align: center;
			color:white;
			font-size: 24rpx;
			line-height: 40rpx;
			.huachi-text{
				
				// transform: scale(0.6);
			}
		}
		.user-photo{
			width: 80rpx;
			height: 80rpx;
			margin-left: 30rpx;
			margin-right: 12rpx;
		}
		
		.name-level-box{
			.level-box{
				.level-value{
					font-size: 28rpx;
					line-height: 24rpx;
					height: 24rpx;
					font-family: mcttf;
					color: #442B1A;
					 text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;
				}
				.level-jindutiao{
					margin-right: 12rpx;
					background-color: #442B1A;
					height: 24rpx;
					width: 180rpx;
					background: #442B1A;
					border-radius: 12rpx;
					.level-jindutiao-value-text{
						// position: absolute;
						font-size: 24rpx;
						height: 24rpx;
						line-height: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						z-index: 22;
						margin-left: 36px;
						margin-top: -22rpx;
						font-family: mcttf;
					}
					.level-jindutiao-value{
						width: 100rpx;
						height: 24rpx;
						background: #FC6803;
						z-index: 1;
						border-radius: 12rpx 0px 0px 12rpx;
					}
				}
				
			}
			.name{
				font-family: mcttf;
				font-size: 40rpx;
				line-height: 36rpx;
				height: 36rpx;
				margin-bottom: 8rpx;
				font-weight: 400;
				color: #442B1A;
				 text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;
			}
		}
	}
	
	.nav-box{
		background-image: url(../../static/index/navbar.png);
		width: 690rpx;
		height: 296rpx;
		margin: 0px auto;
	}
	.main-body{
		margin: 0px auto;
		width: 750rpx;
		background-image: url(../../static/index/page-bgi/index-page-bgi.png);
		height: 1624rpx;
		height: 100vh;
		background-size: 100% 1624rpx;
		background-position: 0rpx calc(100vh - 1624rpx);
		background-repeat: no-repeat;
		
	}
</style>

<script>
	export default {
		data() {
			return {
				storeShow:false
			}
		},
		methods: {
			/**
			 * 打开商店
			 */
			openStore(){
				this.storeShow = true;
			}
		}
	}
</script>

